import React from 'react';
import './Com.css'
import List from '../list/List.jsx';
class Com extends React.Component {
    state = {
        tab: 0,
        value: '',
        todoList: [
            {
                name: "打篮球",
                state: true, //true 为已完成  //false 为未完成
            },
            {
                name: "玩游戏",
                state: false,
            },
            {
                name: "学习",
                state: false,
            },
            {
                name: "写代码",
                state: false,
            },
        ],
    }
    check = (e, index) => {
        let { todoList } = this.state;
/* innerHTML和innerText的区别：

InnerHTML返回标记内的HTML内容，其中包含HTML标记。
InnerText返回标记内文本的值，而不是HTML标记的值 */
        for (let i = 0; i < todoList.length; i++) {
            if (e[1].innerText == todoList[i].name) {
                todoList[i].state = !todoList[i].state
            }
        }

        todoList[index].state = true
        this.setState({
            todoList: [...todoList]
        })

    }
    add = () => {
        let { todoList, value } = this.state;
        this.setState({
            todoList: [...todoList, {
                name: value,
                state: false
            }],
            value:''
        })
    }
    del = (e) => {
        let { todoList } = this.state;
        for (let i = 0; i < todoList.length; i++) {
            if (e.innerText == todoList[i].name) {
                todoList.splice(i, 1)
                this.setState({
                    todoList: [...todoList]
                })
            }
        }
    }
    render() {
        let { todoList, tab, value } = this.state;
        return (
            <div className='box'>
                <div className='top'>
                    <span>任务计划表</span>
                </div>
                <div className='main'>
                    <div className='list'>
                        <p className={tab == 0 ? 'active' : ''} onClick={() => {
                            this.setState({
                                tab: 0,
                            })
                        }}>所有任务</p>
                        <p className={tab == 1 ? 'active' : ''} onClick={() => {
                            this.setState({
                                tab: 1,
                            })
                        }}>已完成</p>
                        <p className={tab == 2 ? 'active' : ''} onClick={() => {
                            this.setState({
                                tab: 2,
                            })
                        }}>未完成</p>
                    </div>
                    <div>
                        <input type="text" value={value} onChange={e => {
                            this.setState({ value: e.target.value })
                        }} />
                        <button onClick={this.add}>添加</button>
                    </div>
                </div>
                <List todoList={todoList} tab={tab} check={this.check} del={this.del}></List>
            </div>
        )
    }
}
export default Com;